<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>泽慧文化</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/public.css">
</head>

<body>
    <!-- 模态框（Modal） -->
    <div class="modal fade bs-example-modal-lg" id="license" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div>
                </div>
                <div class="modal-body text-center">
                    <img src="img/license.png" style="width: 600px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--  -->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div>
                </div>
                <div class="modal-body text-center">
                    <img src="img/gongzhongcrcode.jpg" alt="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- modal  register -->
    <div class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" id='register'>
        <div class="modal-dialog  bs-example-modal-lg" role="document">
            <div class="modal-content register ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"> ×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div>
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <span class="registerMes">
                                 &nbsp;
                                 <!-- 注册失败，请重新注册 -->
                            </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label">账号:</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="inputUsername" maxlength="30" name="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-2 col-xs-offset-2 control-label">密码:</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control a" id="inputPassword" placeholder=" " maxlength="16" name="psw">
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0px;">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" class="form-control zhuce btn btn-primary" id="zhuce">注 册</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6 text-right link-a">
                                <a>登录</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- modal  login -->
    <div class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" id='login'>
        <div class="modal-dialog  bs-example-modal-lg" role="document">
            <div class="modal-content register ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"> ×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div>
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6 loginmsg">
                                &nbsp;
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label">账号:</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="loginUsername" maxlength="30">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-2 col-xs-offset-2 control-label">密码:</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="loginPassword" placeholder=" " maxlength="16">
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0px;">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" class="form-control zhuce btn btn-primary" id="denglu">登 录</button>
                            </div>
                        </div>
                          <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6 text-right link-a">
                                <a>注册</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- heaeder -->
    <navbar>
        <div class="container ">
            <div class="row">
                <div class="navbar-heade pull-right">
                    <ul class="navbar-nav ">
                        <li class="hearder-List my-hide" section="NotloginSection">
                            <a data-target="#login" data-toggle="modal" class="hearder-login">
                                <img src="img/index-denglu1.png" alt="登录" class="ico"> 登录 </a>
                        </li>
                        <li class="hearder-List hearder-zhuce my-hide" section="NotloginSection">
                            <a data-target="#register" data-toggle="modal">
                                <img src="img/index-zhuce1.png" alt="注册" class="ico"> 注册 </a>
                        </li>
                        <li class="hearder-List my-hide" section="loginSection">
                            <a id="usernameLink"></a>
                        </li>
                        <li class="hearder-List ">
                            <a data-target="#myModal" data-toggle="modal">
                                <img src="img/index-guanzhu1.png" alt="关注" class="ico"> 关注 </a>
                        </li>
                        <li class="hearder-List my-hide" section="loginSection">
                            <a id="logout">
                                <img src="img/index-loginout.png" alt="关注" class="ico"> 退出 </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 ">
                    <img src="img/index-shener.png" alt="" style="width:50px;height:50px;">
                    <span class="header-title"> &nbsp; 深圳市泽慧文化传播有限公司</span>
                </div>
                <div class="col-xs-2"> </div>
                <div class="col-xs-6 ">
                    <ul class="navbar-nav  aa">
                        <li class="hearder-List2">
                            <a href="index.html">
                                首页 </a>
                        </li>
                        <li class="hearder-List2">
                            <a href="detail.html">国学小书童 </a>
                        </li>
                        <li class="hearder-List2">
                            <a href="about.html">
                                关于我们 </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </navbar>
    <!-- banner -->
    <div class="index-banner">
        <div id="myCarousel" class="carousel slide center  col-xs-10 col-md-offset-1 bg">
            <!-- 轮播（Carousel）指标   -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
            <!-- 轮播（Carousel）项目  -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/1000x400" alt="First slide">
                    <div class="carousel-caption">标题 1</div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1000x400" alt="Second slide">
                    <div class="carousel-caption">标题 2</div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1000x400" alt="Third slide">
                    <div class="carousel-caption">标题 3</div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1000x400" alt="Third slide">
                    <div class="carousel-caption">标题 4</div>
                </div>
            </div>
        </div>
        <!-- main1 -->
        <div class="index-main1">
            <div class="container ">
                <div class="row">
                    <div class="pull-left main1-title">
                        <h2>国学数字化课程</h2>
                        <span>Digital course of National Science</span>
                    </div>
                </div>
                <div class="videoWarp">
                    <div class="row ">
                        <div class="col-xs-4 videoBox ">
                            <img src="img/三字经.gif">
                        </div>
                        <div class="col-xs-4 videoBox ">
                            <img src="img/千字文.gif">
                        </div>
                        <div class="col-xs-4 videoBox ">
                            <img src="img/弟子规.gif">
                        </div>
                    </div>
                    <div class="row">
                        <div class="pull-left ">
                            <h3 class="pull-left">简介:</h3>
                            <br>
                            <br>
                            <br>
                            <div class="col-xs-12 main1-introduce text-left">&nbsp;&nbsp; 国学数字化课程是根据教育部人教版《中国传统文化教育全国中小学实验教材》课程大纲进行构建，融入了中国古代经典故事和名人典故,直观演绎课文要点,注重思辨和情感培养.</div>
                        </div>
                    </div>
                </div>
                <!-- main2 -->
                <div class="index-main2">
                    <div class="phoneWarp ">
                        <img src="img/phone_1.jpg" alt="" class="phone1">
                        <img src="img/phone_2.jpg" alt="" class="phone2">
                    </div>
                    <div class="row">
                        <div class="pull-left main1-title">
                            <h1>精彩推荐</h1>
                            <span>Wonderful recommendation</span>
                            <div class="main2-list">
                                <ul class="index-main2list">
                                    <li>《高山流水》 </li>
                                    <li>《春江花月夜》</li>
                                    <li> 《大学》 </li>
                                    <li>《弟子规》</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- main3 -->
                <div class="row home-share-section">
                    <div class="col-xs-6 index-main3-crcode">
                        <img src="img/index-crcode.png" alt="">
                    </div>
                    <div class="col-xs-6 intro">
                        关注我们
                        <br/> 请扫二维码
                    </div>
                </div>
            </div>
            <div class="footer text-center">
                <div class="row">
                    <div class="declare-content"><a onclick="window.open('agreement.html')">
                            用户协议
                        </a>|<a onclick="window.open('parents_care.html')">
                            家长监护
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div>版权所有 @ 深圳市泽慧文化传播有限公司</div>
                    <div class="declare-content"><a onclick="window.open('http://www.miitbeian.gov.cn')">粤ICP备15010834号-2</a></div>
                </div>
                <div class="licenseDiv" data-target="#license" data-toggle="modal">
                    <img src="img/license.png" style="width:120px;">
                </div>
            </div>
            <div class="row"></div>
            <script src="js/jquery.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/main.js"></script>
            <script>
            $(document).ready(function() {

                ///  控制video
                $('video').click(function() {
                    if ($(this).hasClass('pause')) {
                        $(this).trigger("play");
                        $(this).removeClass('pause');
                        $(this).addClass('play');
                        $(this).next().hide();
                        $(this).prev().hide();
                    } else {
                        $(this).trigger("pause");
                        $(this).removeClass('play');
                        $(this).addClass('pause');
                        $(this).next().show();
                    }
                });
                $('.circle').click(function() {
                    console.log(1);
                    if ($(this).prev().hasClass('pause')) {
                        $(this).prev().trigger("play");
                        $(this).prev().removeClass('pause');
                        $(this).prev().addClass('play');
                        $(this).hide();
                        $(this).prev().prev().hide();
                    } else {
                        $(this).prev().trigger("pause");
                        $(this).prev().removeClass('play');
                        $(this).prev().addClass('pause');

                    }
                })

                //轮播图
                $('.carousel').carousel({
                    interval: 3000 // in milliseconds
                })

            });
            </script>
</body>

</html>